<template>
  <div
    v-loading="isLoading"
    class="panel-property"
  >
    <div class="content">
      <PanelLabelOverflowTooltip
        ref="panelLabelOverflowTooltip"
        :component-style="form.componentStyle"
      />
      <el-form
        ref="form"
        v-panel-label-overflow-tooltip="getPanelLabelOverflowTooltip()"
        class="prop-form"
        label-position="right"
        :model="form"
        :rules="rules"
        label-width="30%"
      >
        <BaseOption
          :form="form"
          option="tooltipHasLabel"
          :config="config"
          type="echart"
          :echart-vars="{ name: '', value: '' }"
          :widget-instance-id="widgetInstanceId"
        />
        <BaseOption
          :form="form"
          option="componentStyle"
          @change="initTitleColor"
        />
        <BaseOption
          :form="form"
          option="color"
          :config="config"
          :color-group="colorGroup"
        />
        <OptionCollapse>
          <el-collapse-item
            :title="$demoi18n('panel.label.titleStyle')"
            name="cssStyle.title"
          >
            <BaseOption
              :form="form"
              option="title"
            />
            <BaseOption
              :form="form"
              option="cssStyle.title"
              :df-css-style-attrs="dfCssStyleAttrs.title"
            />
            <BaseOption :form="form" option="isTitleSignVisiable" />
            <BaseOption v-if="form.isTitleSignVisiable" :form="form" option="signMarginLeft" />
            <BaseOption v-if="form.isTitleSignVisiable" :form="form" option="verticalLineBackgroundColor" />
          </el-collapse-item>
        </OptionCollapse>
        <BaseOption
          :form="form"
          option="echart"
          :echart-conf="getEchartConf()"
        />

        <Teleport v-if="childrenMounted" :to="`#legend_color_after_${widgetInstanceId}`">
          <EcFormItem
            :form="form"
            option="echart.legend.textStyle.rich.b.color"
            :label="$demoi18n('panel-property.valueColor')"
            type="color"
          />
        </Teleport>

      </el-form>
    </div>
    <PanelPropertyBottom :config="config" :widgetInstanceId="widgetInstanceId" :form="form" />
  </div>
</template>
<script>
import OptionCollapse from '@/components/common/base-option/option-collapse/option-collapse.vue';
import PanelLabelOverflowTooltip from '@/components/common/overflow-tooltip/overflow-tooltip.vue';
import panelPropertyBase from '@/mixin/panel-property-base.js';
import { mergeObj } from '@/utils/util.js';
import BaseOption from '../../common/base-option/base-option.vue';
import colorGroup from './colorGroup.js';
import config from './config.js';
import { nextTick } from 'vue';
import EcFormItem from '@/components/common/echart/form-item.vue';

export default {
  name: 'PanelProperty',
  components: {
    BaseOption,
    OptionCollapse,
    PanelLabelOverflowTooltip,
    EcFormItem,
  },
  mixins: [panelPropertyBase],
  props: ['config', 'widgetInstanceId', 'widget'],
  data() {
    return {
      activeColorRadio: '#2D8CF0', // 单选框选中时的颜色
      colorGroup: colorGroup,
      tip: this.$demoi18n('panelProperty.basicPie.totalTip'),
      isLoading: false,
      form: {},
      rules: {},
      dfCssStyleAttrs: {},
      extraColorConfig: {
        isCustom: true,
        field: 's',
      },
      childrenMounted: false,
    };
  },
  created() {
    if (this.config) {
      this.form = JSON.parse(JSON.stringify(this.config.config.property));
      this.dfCssStyleAttrs = this.initDfCssStyleAttrs();
    }

    // 合并config.js属性，防止新增属性缺失而报错
    const _form = JSON.parse(JSON.stringify(config.config.property));
    this.form = mergeObj(_form, this.form);
  },
  mounted() {
    nextTick(() => {
      this.childrenMounted = true;
    });
  },
  methods: {
    getPanelLabelOverflowTooltip() {
      return {
        parentComp: this,
      };
    },
    getEchartConf() {
      return {
        _componentName: 'basic-pie',
        legend: {
          orient: 'vertical',
          displayType: 'name',
          icon: 'rect',
        },
        dfVals: this.getEchartDfVals({
          'echart.legend.show': 'legend',
        }),
      };
    },
  },
};
</script>

<style lang="less" scoped>
@import '../../common/less/panel-property.less';
</style>
<style lang="less" scoped>
.panel-property {
  .content {
    .prop-form {
      padding: 0 10px;

      :deep(.el-form-item) {
        margin-bottom: 0;
      }
      .input-number {
        width: 80px;
        :deep(.el-input-number__decrease) {
          width: 19px;
          background-color: #fff;
        }
        :deep(.el-input-number__increase) {
          width: 19px;
          background-color: #fff;
        }
        :deep(.el-input__inner) {
          padding-left: 19px;
          padding-right: 19px;
        }
      }
      .input-number-left {
        margin-right: 25px;
      }

      .color-radio-group {
        background-color: #eeeeee;
        :deep(.el-radio-button__inner) {
          display: inline-block;
          padding: 2px 2px;
          border: 0;
          border-radius: 0;
          height: 24px;
          margin: 2px 2px;
          background: #eeeeee;
        }
        :deep(.is-active) {
          .el-radio-button__inner {
            background-color: #409eff;
          }
        }
      }
    }
  }
}
</style>
